<template>
  <div>
      <!--1.选项卡头部部分   默认买房管家显示-->
      <el-tabs v-model="editableTabsValue"
               type="card"
               :closable="true"
               @tab-remove="removeTab">
          <el-tab-pane v-for="(item,index) in editableTabs" :key="item.name"
                  :label="item.title"
                  :name="item.name">
             <!-- {{item.content}}-->
              <!--这里是将content原来放字符串的地方  换成了引入组件-->
              <tab-component
                      :is='item.content'
                      @show="addTabS"
                      @textHouse="addText"
                      @lookHouse="addLook"
              ></tab-component>
          </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
    import * as api from '../utils/api';
    import ZxHouseSearchInput from '../components/ZxHouseSearchInput'
    import ZxFindHouseTab from '../components/ZxFindHouseTab'
    import ZxHouseManagerTab from '../components/ZxHouseManagerTab'
    import ZxHouseTestTab from '../components/ZxHouseTestTab'
    import ZxGetCarTab from '../components/ZxGetCarTab'
    export default {
        name: "ZxHousingManager",
        components:{
            ZxHouseSearchInput,
            ZxFindHouseTab,
            ZxHouseManagerTab,
            ZxHouseTestTab,
            ZxGetCarTab
        },
        data() {
            return {

                editableTabsValue: '1',
                checkAll: false,
                editableTabs: [
                    {
                    title: '买房管家',
                    name: '1',
                    content: 'ZxHouseManagerTab'/*这里写上引入的组件的名称*/
                   }
                ],
                tabIndex: 1,
            }
        },
        created() {
            /*this.getHouseMange()*/
        },
        methods: {
           /* getHouseMange(){
                this.axios({
                    url:api.GET_HOUSEMANGE,
                    method:'get',
                    params:{currentPage:1,pageSize:5}
                }).then(data=>{
                    console.log(data)
                }).catch(err=>{

                })
            },*/

            /*已经分装的添加选项卡的头部标题方法  只需要调用传参数即可*/
            addTab(myTitle,myName,myContent) {
                   /* let newTabName = ++this.tabIndex + '';*/
                let arr=this.editableTabs.filter(item=>item.name===myName)
                if (arr.length===0){
                    let newTabName = myName;

                    this.editableTabs.push({
                        title: myTitle,
                        name: myName,
                        content: myContent,
                    });
                    this.editableTabsValue = newTabName;

                }

            },

            /*删除选项卡标题*/
            removeTab(targetName) {


                if (parseInt(targetName)!==1){
                    this.editableTabsValue=targetName
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    console.log(this.editableTabs)
                    console.log(this.editableTabsValue)
                    if (activeName===targetName){


                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                console.log(nextTab)
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                        this.editableTabsValue = activeName
                        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                    }
                }
            },
            /*点击 委托按钮 就添加一个选项卡  并跳转到===委托找房*/
            addTabS(){
                this.addTab('委托找房','2','ZxFindHouseTab')
                /*  this.$router.push({
                      name:'ZxFindHouse',
                      path:'/Home/ZxHousingManager/ZxFindHouse',
                      query: {
                      },
                  })*/
            },
            /*点击 楼盘测评 就添加一个选项卡  并跳转相应的====楼盘测评界面*/
            addText(){
                this.addTab('楼盘测评','3','ZxHouseTestTab')
            },
            /*点击 看房直通车 就添加一个选项卡  并跳转相应的====看房直通车界面*/
            addLook(){
                this.addTab('看房直通车','4','ZxGetCarTab')
            }

        }
    }
</script>

<style lang="less" scoped>
    .el-input{
        width: 200px;
    }
    #selectK{
        padding: 10px;
    }
    .clear:after{
        content: '';
        display: block;
        clear: both;
    }
    .selectX{
        padding: 10px;
        .selectAll{
            float: left;
        }
        .selectDate{
            float: right;
        }
    }
</style>